<template>
	<view class="content">
		<view style="position: absolute; top: 20rpx; right: 30rpx; font-size: 30rpx;" @click="guanli"
			v-if="card.length > 0">管理</view>
		<checkbox-group @change="checkboxChange" style="width: 97%; margin: 0 auto;">
			<label v-for="(item, idx) in card" style="display: flex; align-items: center;">
				<checkbox :value="item.card_no" :checked="item.checked" style="margin-top: -50rpx;"
					v-if="glshanchu == true" />
				<view class="kuai">
					<view class="flex">
						<image class="logo" src="@/static/wallet/yhklogo.png" mode=""></image>
						<view class="">
							<view class="name">{{item.bank_name}}</view>
							<view class="name" style="margin-top: 10rpx;">{{item.card_type}}</view>
						</view>
						<view style="color: white; font-size: 28rpx; margin-left: 11rpx;">{{item.use_type}}</view>
						<view class="gai" @click="xiugai(item.id)" v-if="glshanchu == false">修改</view>
					</view>
					<view class="number">{{item.card_no}}</view>
				</view>
			</label>
		</checkbox-group>
		<view class="tianjia" @click="tianjia" v-if="glshanchu == false">
			<view style="color: #F09200; margin-left: 35rpx; font-size: 50rpx;">＋</view>
			<view style="margin-left: 10rpx;">添加银行卡</view>
		</view>
		<view style="width: 100%; display: flex; align-items: center;" v-else>
			<button style="width: 100%;" @click="quxiao">取消</button>
			<button style="width: 100%;" @click="shanchu">删除</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("member"),
				card: [],
				glshanchu: false,
				shuju: [],
			}
		},
		onShow() {
			this.list_data()
		},
		methods: {
			list_data() {
				let self = this
				let data = {
					uuid: self.user.uuid
				}
				this.$boya.NPost('/app/user/bank_card', data, function(res) {
					let shuju = res.data
					for (var i = 0; i < shuju.length; i++) {
						if (shuju[i].card_no) {
							let maskedNumber = shuju[i].card_no.replace(/^(\d{4})(\d+)(\d{4})$/, (_, prefix,
								middle, suffix) => {
								let maskedMiddle = middle.replace(/\d/g, '·');
								return `${prefix}${maskedMiddle}${suffix}`;
							});
							// console.log('dian: ', maskedNumber);
							shuju[i].card_no = maskedNumber
						}
					}
					self.card = res.data
					console.log('银行卡：', self.card);
				}, null, {
					showError: false
				});
			},
			xiugai(id) {
				uni.navigateTo({
					url: '/pages/MY/wallet/AddBankCard?id=' + id
				})
			},
			tianjia() {
				uni.navigateTo({
					url: './AddBankCard'
				})
			},
			guanli() {
				this.glshanchu = true
			},
			quxiao() {
				this.glshanchu = false
				var items = this.card
				// console.log(values);
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					this.$set(items[i], 'checked', false)
				}
				console.log('shuju: ', this.card);
			},
			checkboxChange(e) {
				if (this.glshanchu == true) {
					var items = this.card,
						values = e.detail.value;
					// console.log(values);
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						if (values.includes(item.card_no)) {
							this.$set(item, 'checked', true)
						} else {
							this.$set(item, 'checked', false)
						}
					}
				}
			},
			shanchu() {
				let self = this
				self.shuju = []
				// self.$boya.msg('暂未开放')
				let card = self.card
				for (var i = 0; i < card.length; i++) {
					if (card[i].checked == true) {
						self.shuju.push(card[i])
						// console.log('card: ', card[i]);
					}
				}
				// console.log('shuju：', self.shuju);
				if (self.shuju.length <= 0) {
					self.$boya.msg('您未选择任何数据');
					return
				} else if (self.shuju.length == 1) {
					uni.showModal({
						title: '提示',
						content: '您确认删除单条数据吗？',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								});
								self.danshan();
							} else if (res.cancel) {
								self.$boya.msg('您已取消')
							}
						}
					});
				} else if (self.shuju.length > 1) {
					uni.showModal({
						title: '提示',
						content: '您确认删除多条数据吗？',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								});
								self.duoshan();
							} else if (res.cancel) {
								self.$boya.msg('您已取消')
							}
						}
					});
				}
			},
			danshan() {
				let self = this
				let data = {
					id: self.shuju[0].id,
					card_no: null,
					bank_name: null,
					card_type: null,
					use_type: null,
					opt: 'del'
				}
				console.log('data：', data);
				self.$boya.NPost('/app/user/add_bank_card', data, function(res) {
					if (res.code == 200) {
						uni.hideLoading();
						self.$boya.msg('删除成功')
						self.list_data()
					} else {
						self.$boya.msg(res.msg)
					}

				}, null, {
					showError: false
				});
			},
			duoshan() {
				let self = this
				let cishu = self.shuju.length
				for (let i = 0; i < cishu; i++) {
					let data = {
						id: self.shuju[i].id,
						card_no: null,
						bank_name: null,
						card_type: null,
						use_type: null,
						opt: 'del'
					}
					console.log('data：', data);
					self.$boya.NPost('/app/user/add_bank_card', data, function(res) {
						if (res.code == 200) {
							uni.hideLoading();
							self.$boya.msg('删除成功')
							self.list_data()
						} else {
							self.$boya.msg(res.msg)
						}
					}, null, {
						showError: false
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		padding-top: 55rpx;
		background-color: #EDEDED;
	}

	.kuai {
		width: 88vw;
		height: 300rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #A0A4C3;
		box-shadow: 5px 5px 8px #B2BBED;
		border-radius: 20rpx;
		margin-bottom: 55rpx;
		/* background: url('../../../static/wallet/yhkbj1.png') 100% 100% / 100% 100%; */
	}

	.kuai>view {
		padding-top: 40rpx;
		padding-left: 20rpx;
	}

	.flex {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		padding: 16rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 100rpx;
		margin-left: 15rpx;
	}

	.name {
		color: white;
		margin-left: 30rpx;
		/* font-size: 30rpx; */
		letter-spacing: 5rpx;
	}

	.gai {
		position: absolute;
		right: 72rpx;
		border-radius: 30rpx;
		padding: 15rpx 20rpx;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.number {
		color: white;
		margin-top: -20rpx;
		text-align: center;
		/* font-size: 38rpx;
		letter-spacing: 6rpx; */
		font-size: 35rpx;
		letter-spacing: 5rpx;
	}

	.tianjia {
		width: 88vw;
		height: 200rpx;
		margin: 0 auto;
		line-height: 200rpx;
		background-color: #fff;
		/* box-shadow: 4px 4px 10px #000; */
		border-radius: 20rpx;
		margin-bottom: 55rpx;
		font-size: 35rpx;
		letter-spacing: 5rpx;
		display: flex;
		align-items: center;
	}
</style>